<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>使用DataTransfer对象拖放文件</title>
        <meta name="auther" content="wangjiale"/>
        <style>
            #src>*{float:left;}
            #target{width:200px; height:100px; border:medium double black; text-align:center; display:table;}
            #target>p{display:table-cell; vertical-align:middle;}
            table{margin:4px; border-collapse:collapse;}
            th,td{padding:4px;}
        </style>
    </head>
    <body>
        <div id="target">
            <p id="msg">Drop Files Here</p>
        </div>
        <table id="data" border="1">
            
        </table>
        <script>
            var target=document.getElementById("target");

            //创建释放区域
            target.ondragenter=handleDrag;
            target.ondragover=handleDrag;
            function handleDrag(e){
                e.preventDefault();
            }
            
            target.ondrop=function(e){
                var files=e.dataTransfer.files;
                var tableElem=document.getElementById("data");
                tableElem.innerHTML="<tr><th>Name</th><th>Type</th><th>Size</th></tr>";
                for(var i=0; i<files.length; i++){
                    var row="<tr><td>"+files[i].name+"</td><td>"+
                        files[i].type+"</td><td>"+
                        files[i].size+"</td></tr>";
                    tableElem.innerHTML+=row;
                }
                e.preventDefault();
            }

        </script>
    </body>
</html>